<template>
  <div class="log-login-manage">

    <div style="width: 100%;">
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="primary" @click="loadLogOperates">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>
      <Button v-permission type="default" @click="clearLogOperate">清空日志</Button>
      <div class="float-right">
        <Input v-permission class="m-r-5px" v-model="searchFormData.username" style="width: 150px;" placeholder="用户名" @on-enter="loadLogOperates"/>

        <Select class="m-r-5px" v-model="searchFormData.request_method" style="width: 150px;">
          <Option value="GET">GET</Option>
          <Option value="POST">POST</Option>
          <Option value="PUT">PUT</Option>
          <Option value="DELETE">DELETE</Option>
        </Select>

        <Button class="m-r-5px" @click="loadLogOperates">
          <Icon type="md-search"/>
          搜索
        </Button>
        <Button @click="clearSearchForm">清空</Button>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="m-b-10px"></div>

    <Table ref="table" :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadLogOperates">
    </Page>

  </div>
</template>

<script>
import ManageMixin from '../../../../mixin/ManageMixin'

export default {
  name: "LogOperateManage",
  mixins: [ManageMixin],
  data() {
    return {
      loading: false,
      searchFormData: {
        username: '',
        request_method: ''
      }
    }
  },
  mounted() {
    this.loadLogOperates()
  },
  methods: {
    loadLogOperates() {
      this.loading = true
      this.$PnApi.LogOperateApi.getPnLogOperateByPage({pageIndex: this.pageIndex, pageSize: this.pageSize, username: this.searchFormData.username, request_method: this.searchFormData.request_method}).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },
    clearSearchForm() {
      this.searchFormData.username = ''
      this.searchFormData.request_method = ''
      this.loadLogOperates();
    },
    clearLogOperate() {
      this.$Modal.confirm({
        title: '提醒',
        content: '确认要清空日志吗？',
        onOk: () => {
          this.$PnApi.LogOperateApi.clearLogOperate().then(result => {
            if(result.data.success) {
              this.$Message.success('清空成功')
              this.loadLogOperates()
            }
          })
        }
      });
    }
  },
  computed: {
    columns() {
      let currentUser = JSON.parse(localStorage.getItem('current_user'))
      let columns = [
        {
          title: '操作名称',
          key: 'operate_name',
          minWidth: 100
        },
        {
          title: '全路径类名',
          key: 'class_name',
          tooltip: false,
          ellipsis: true,
          minWidth: 200
        },
        {
          title: '函数名称',
          key: 'method_name',
          width: 170
        },
        {
          title: 'URI',
          key: 'request_uri',
          minWidth: 150
        },
        {
          title: '请求方式',
          key: 'request_method',
          width: 100
        },
        {
          title: '操作用户',
          key: 'username',
          width: 120
        },
        {
          title: 'IP地址',
          key: 'ip',
          width: 150
        },
        {
          title: '执行时间',
          key: 'create_date',
          width: 170
        }
      ]
      if (currentUser.role_code != 'ROLE_ADMIN') {
        _.pullAt(columns, 1, 2, 3)
      }
      return columns
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>
